<template>
  <div>
    <div class="customer-info" v-for="(item, index) in items" ref="testDiv">
      <!--<div class="tag clearfixed">-->
      <!--<span class="info-title">{{item.Name}}</span>-->
      <!--&lt;!&ndash;<span class="more" @click="loadResult('1', index), searchAction(`butclass:${butValue},keywrod: ${Keyword},title:${item.Name},content:More`)">More</span>&ndash;&gt;-->
      <!--</div>-->
      <el-row class="info-content" type="flex" justify="space-between"
              @click.native="loadResult(item.user_id,item.lenovoid,item.telephone,index)">
        <el-col :span="2">
          <!--<span class="info-title" :title="item.customer_name">{{item.customer_name}}</span>-->
          <!--<el-tooltip class="item" effect="light" :content="item.customer_name" placement="right-end">-->
          <!---->
          <!--</el-tooltip>-->
          <!--<span class="info-title" >{{item.name}}</span>-->
          <p style="margin: 0px; padding: 0px;">{{item.name}}</p>
        </el-col>
        <el-col :span="5">
          <div>
            <!--<span class="info-title" >{{item.customername}}</span>-->
            <p style="margin: 0px; padding: 0px;">{{item.customername}}</p>
          </div>
        </el-col>
        <el-col :span="3">
          <!--<div class="info-one info-item" @click="loadResult('1', index)">-->
          <div class="info-one info-item">
            <!--<img src="../../static/img/icon-account.png" style=" vertical-align: bottom" v-if="item.group === '0'">-->
            <!--<img src="../../static/img/icon-group.png" style=" vertical-align: bottom" v-if="item.group === '1'">-->
            <div>
              <p style="margin: 0px; padding: 0px;">{{item.work_position}}</p>
            </div>
          </div>
        </el-col>
        <el-col :span="3">
          <div class="info-three info-item">
            <!--<img src="../../static/img/icon-machines.png" style=" vertical-align: bottom">-->
            <div>
              <!--<p style="margin: 0px; padding: 0px;">Machine</p>-->
              <p style="margin: 0px; padding: 0px;">{{item.telephone}}</p>
            </div>
            <!--<span>Machine({{item.sell_in_qty}})</span>-->
          </div>
        </el-col>
        <el-col :span="4">
          <div class="info-four info-item">
            <!--<img src="../../static/img/icon-service.png" style=" vertical-align: bottom">-->
            <div>
              <!--<p style="margin: 0px; padding: 0px;">Claim</p>-->
              <p style="margin: 0px; padding: 0px;">{{item.email}}</p>
            </div>
            <!--<span>Service({{item.repair_so}})</span>-->
          </div>
        </el-col>
        <el-col :span="4">
          <div class="info-four info-item">
            <!--<img src="../../static/img/icon-service.png" style=" vertical-align: bottom">-->
            <div>
              <!--<p style="margin: 0px; padding: 0px;">Claim</p>-->
              <p style="margin: 0px; padding: 0px;">{{item.customer_group}}</p>
            </div>
            <!--<span>Service({{item.repair_so}})</span>-->
          </div>
        </el-col>
        <el-col :span="3">
          <div class="info-four info-item">
            <!--<img src="../../static/img/icon-service.png" style=" vertical-align: bottom">-->
            <div>
              <!--<p style="margin: 0px; padding: 0px;">Claim</p>-->
              <p style="margin: 0px; padding: 0px;">{{item.claim}}</p>
            </div>
            <!--<span>Service({{item.repair_so}})</span>-->
          </div>
        </el-col>
        <!--<div style="width: 56px; position: absolute; z-index: 99999; right: 0; top: -16px;">-->
        <!--&lt;!&ndash;<img src="../../static/img/bp.png" style=" vertical-align: bottom" v-if="item.group === '0'">&ndash;&gt;-->
        <!--<img src="../../static/img/group.png" style=" vertical-align: bottom" v-if="item.group === '1'">-->
        <!--</div>-->
      </el-row>
    </div>
  </div>
</template>

<script>
  import {
    getUsername,
    getPageId,
    getPageName,
    getUrl,
    getKeyword,
    getbutValue,
    setsearchItem
  } from "utils/auth";

  export default {
    data() {
      return {
        resultValue: '',
        searValue: '',
        Keyword: getKeyword(),
        butValue: getbutValue()
      }
    },
    methods: {
      loadResult(id,lenovoId,Tel,index) {
//        this.resultValue = name;
        this.$router.push({path: './ContactsSearchResult', query: {user_id: id,lenovo_id:lenovoId,Tel}})
        // console.log('修改%%%%%%%%%%')
        // console.log(this.items[index].flag)
        // console.log(index)
// 没改flag之前的        this.resultValue = this.childFlag === 'account' ? this.items[index].Name : this.items[index].customer
//        this.resultValue = this.items[index].flag === 'account' ? this.items[index].customer_name : this.items[index].customer
//        this.$router.push({ path: '/searchResult', query: { show: n, search_value: this.resultValue, resultTitle: this.items[index].Name, result_flag: this.childFlag }})
// 没改flag之前的       this.$router.push({ path: '/CustomerProfile/newSearchResult', query: { show: n, search_value: this.resultValue, resultTitle: this.items[index].Name, result_flag: this.childFlag }})
//        this.$router.push({ path: './newSearchResult', query: { show: n, search_value: this.resultValue, resultTitle: this.items[index].customer_name, result_flag: this.items[index].flag, bpNumber: this.items[index].customer, bpClaim: this.items[index].repair_so }})
      },
      searchAction(key){
        var _this = this;
        _this.key = key;
        console.log(key);
        setsearchItem(_this.key);
        Avatar.push([
          'track',
          [
            'category',
            'loginSuccess',
            'label',
            {
              url: getUrl(),
              userName: getUsername(),
              parentName: getPageName(),
              childName: _this.key
            },
            0
          ]
        ]);
      }
    },
    props: ['items', 'childFlag', 'searchValue'],
//    mounted() {
//      this.searValue = this.searchValue
//      console.log('转大写前的'+this.searValue)
//      this.searValue = this.searValue.toUpperCase()
//      for(let i = 0; i <this.items.length; i++) {
//        var aDemo = this.searValue.split('');
//        var demoLength = aDemo.length
//        console.log('转大写后的'+this.searValue)
//        if(this.items[i].Name.indexOf(this.searValue) != -1) {
// //          alert('有啊')
//          var qs = this.items[i].Name.indexOf(this.searValue)
//          var jq = this.items[i].Name.slice(qs, qs+demoLength)
//          var aValue = this.items[i].Name.split('')
//          var aValue1 = aValue.slice(0, qs).join('')
//          var aValue2 = aValue.slice(qs+demoLength).join('')
// //        console.log(this.$refs.testDiv[i].getElementsByTagName('span')[0].innerHTML)
//          this.$refs.testDiv[i].getElementsByTagName('span')[0].innerHTML = aValue1+'<span style="color: #f00">'+this.searValue+'</span>'+aValue2
//        }
//      }
//    },
    mounted() {

    },
    updated() {

    }
  }

</script>

<style lang="scss" scoped>
  .customer-info {
    position: relative;
    margin-top: 10px;
    border-radius: 6px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
    border: 1px solid #e6ebf5;
    background-color: #fff;
    color: #444c5a;
    font: 15px Helvetica;
    .info-title {
      /*position: absolute;*/
      left: 0;
      /*padding: 10px;*/
      /*max-width: 200px;*/
      max-width: 150px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .more {
      position: absolute;
      right: 1%;
      padding: 10px 50px 10px 10px;
      cursor: pointer;
      color: #409EFF;
      font-weight: bold;
      background: url("../../../../../static/img/icon-more.gif") no-repeat 30px center;
    }
    .clearfixed:after {
      content: '';
      display: inline-block;
      clear: both;
    }
    .info-content {
      margin-left: 28px;
      .el-col {
        line-height: 75px;
        /*background-color: #f00;*/
        cursor: pointer;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .info-item {
        /*background-color: #090;*/
        position: relative;
        display: inline-block;
        /*height: 75px;*/
        /*line-height: 100px;*/
        cursor: pointer;
        img {
          width: 60px;
          height: 60px;
          margin-top: 20px;
        }
        span {
          display: inline-block;
          position: relative;
          top: -20px;
        }
      }
      .icon {
        font-size: 30px;
        margin-right: 5px;
        vertical-align: middle;
      }
    }
  }
</style>
